<script setup lang="ts">
  import { categoryAPI } from '~/apis/category'

  const { data: page } = await useAsyncData('recipe', () => queryContent('/recipe').findOne())

  if (!page.value) {
    throw createError({
      statusCode: 404,
      statusMessage: '未找到菜谱信息',
      fatal: true
    })
  }
  const route = useRoute()
  const recipeStore = useRecipeStore()
  const categoryName = ref('')

  const getCategoryName = async (category: string) => {
    const { data } = await categoryAPI.detail(+category)
    if (data && data.value) {
      categoryName.value = data.value.name
    }
  }
  watch(
    () => recipeStore.categories,
    val => {
      if (val) {
        getCategoryName(val)
      } else {
        categoryName.value = ''
      }
    }
  )

  useSeoMeta({
    title: page.value.title,
    ogTitle: page.value.title,
    description: page.value.description,
    ogDescription: page.value.description
  })
</script>

<template>
  <UContainer v-if="page">
    <UPageHeader
      :title="categoryName ? page.title + ' —— ' + categoryName : page.title"
      :description="page.description"
      class="py-[50px]"
    />

    <UPageBody>
      <NuxtPage />
    </UPageBody>
  </UContainer>
</template>
